<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=2,minimum-scale=1,maximum-scale=1,user-scalable=no">
	<link rel="stylesheet" href="css/tg_mobile_reset.css">
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<title>bootstrap 模态框禁用</title>
</head>
<body>
	<div id="app">
		
		<div style="margin: 30px 90px">
			<!-- <input type="button" value="按钮" data-target="#myModal" class="btn btn-primary btn-lg" data-toggle="modal" > -->
			<input type="button" value="按钮" class="btn btn-primary btn-lg" id="mdl" @click="showMdl">
		</div>
		
		<div class="modal fade" tabindex="-1" role="dialog" id="zcMdl" v-show="isShow">
		  <div class="modal-dialog" role="document">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		        <h4 class="modal-title">Modal title</h4>
		      </div>
		      <div class="modal-body">
		        <p>One fine body&hellip;</p>
		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
		        <button type="button" class="btn btn-primary">Save changes</button>
		      </div>
		    </div><!-- /.modal-content -->
		  </div><!-- /.modal-dialog -->
		</div><!-- /.modal -->
	</div>





	<script src="./lib/jquery-1.11.3.min.js"></script>
	<!-- <script src="./lib/bootstrap.min.js"></script> -->
	<script src="./lib/vue.min.js"></script>
	<script>
		$(document).off('.data-api')
		// $('#mdl').click(function(event) {
		// 	$('#zcMdl').modal();
		// });
		var app = new Vue({
			el:'#app',
			data:{
				isShow:false
			},
			methods:{
				showMdl:function() {
					this.isShow = true;
				},
				
			},
			
		})
	</script>
	<script>
		//结论：vue 调起bt模态框暂不可行
	</script>
</body>
</html>